<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() +
            request.getContextPath() + "/";
%>
<html>
<head>
    <title>书店</title>
    <base href="<%=basePath%>" />
    <script type="text/javascript" src="js/jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="css/table.css">
    <style>
        .ding{
            top: 0px;
            left: 0Px;
            width: 100%;
            height: 60Px;
            position: fixed;
            background-color:white;
            border-width: 0 0 2px 0;
            border-style: solid;
            border-color: LightGrey;
        }
        .dingmsg{
            float: left;
            /* width: 60Px;
            height: 40Px; */
            margin-right:20px;
            margin-top:5px;
        }
        .cebian{
            top: 62Px;
            left: 0Px;
            width: 180px;
            height: 100%;
            position: fixed;
            background-color:#ffffff;
            border-width: 0 2px 0 0;
            border-style: solid;
            border-color: LightGrey;
            /* overflow:scroll;侧边框 */
        }
        .cebianmsg{
            float: top;
            margin-left:0px;
            margin-top:20px;

        }
        .cebianmsg2{
            float: top;
            margin-left:0px;
            margin-top:20px;
        }
        .zhuti{
            top: 62px;
            left: 182px;
            width: 90%;
            height: 100%;
            position:fixed;
            background-color:#f5f5f5;
            /* text-align: center; */
        }
        .b{
            float:right;
            color: lightgray;
        }
        .b:hover{
            color: black;
            cursor: pointer;
        }
        .btn1{
            width: 50px;
            height: 25px;
            /* background-color: LightGrey; */
            background:transparent;
            border-radius: 8px;
            text-align: center;
            border-width:1px;
        }
        .btn2{
            /*background:transparent;	/*按钮背景透明*/
            border-width:0px;	/*边框透明*/
            width: 179px;
            height: 60px;
            background-color: white;
            /* border-radius: 8px; */
            text-align: center;
        }
        .btn2:hover{
            background-color: #eeeeee;
        }
        .btn2.active{
            background-color: #eeeeee;
        }
        .content{
            margin: 10px auto;
            display: none;
        }
        .content.show{
            display: block;
        }
        .btn3{
            /*background:transparent;	/*按钮背景透明*/
            border-width:0px;	/*边框透明*/
            width: 179px;
            height: 40px;
            background-color: #428bca;
            border-radius: 8px;
            text-align: center;
        }
        .text{
            outline:0 none;
            border-color:rgba(82,168,236,0.8);
            box-shadow:inset 0 1px 3px rgba(0,0,0,0.1),0 0 8px rgba(82,168,236,0.6);
            width: 470px;
            height: 495px;
        }
        .alert-box {
            display:table;
            width:100%;
            height:100%;
            position:fixed;
            top:62px;
            bottom:0;
            left: 182px;
            right:0;
            z-index:9999;
            background-color:rgba(0, 0, 0, 0.3);
        }
        .alert {
            position:absolute;
            left: 40%;
            top: 40%;
            transform: translate(-50%,-50%);
            text-align:center;
            display:table-cell;
            vertical-align:middle;
            border: 2px solid rgb(247, 243, 243);
            background-color: white;
            height: 400px;
            width: 700px;
            border-radius: 0.5rem;
        }
        .alert-box2 {
            display:table;
            width:100%;
            height:100%;
            position:fixed;
            top:62px;
            bottom:0;
            left: 182px;
            right:0;
            z-index:9999;
            background-color:rgba(0, 0, 0, 0.3);
        }
        .alert2 {
            position:absolute;
            left: 40%;
            top: 40%;
            transform: translate(-50%,-50%);
            text-align:center;
            display:table-cell;
            vertical-align:middle;
            border: 2px solid rgb(247, 243, 243);
            background-color: white;
            height: 400px;
            width: 700px;
            border-radius: 0.5rem;
        }
        .alert-box3 {
            display:table;
            width:100%;
            height:100%;
            position:fixed;
            top:62px;
            bottom:0;
            left: 182px;
            right:0;
            z-index:9999;
            background-color:rgba(0, 0, 0, 0.3);
        }
        .alert3 {
            position:absolute;
            left: 40%;
            top: 40%;
            transform: translate(-50%,-50%);
            text-align:center;
            display:table-cell;
            vertical-align:middle;
            border: 2px solid rgb(247, 243, 243);
            background-color: white;
            height: 400px;
            width: 700px;
            border-radius: 0.5rem;
        }
        .box{
            position:absolute;
            left: 250px;
            width:496px;
            height:40px;
            border:2px solid white;
            margin:auto;
            /*此元素会作为一个表格单元格显示
                （类似 <td> 和 <th>）*/
            display: table-cell;
            /*垂直居中 */
            vertical-align: middle;
            /*水平居中*/
            text-align: center;
        }
        .input{
            float:left;
            width:400px;/*宽400*/
            height:38px;/*高38（因为文本框内外边框要占用1像素所以总体高度减2，其他盒子同理）*/
            outline:none;
            border:none;/*取消文本框内外边框*/
        }
        .btnSelect{
            float:left;
            width:96px;
            height:40px;
            color:white;
            background-color:#a28374;/*将按钮背景设置为红色，字体设置为白*/
            border:none;
            outline:none;/*取消边框和外边框将按钮边框去掉*/
        }
        img{
            width: 100px;
        }
        img:hover{
            opacity:0.7;
        }
        .img2{
            width: 65px;
        }
        .booktext{
            font-size: 20px;
            color: red;
        }
        .moaltext{
            font-size: 20px;
            color: rgb(85, 81, 81);
        }
        .jiesuan{
            position: fixed;
            bottom: 50px;
            left: 980px;
            width: 200px;
            height: 50px;
        }
        .jieshou{
            background:transparent;
            border-width:0px;
            color: black
        }
        .jieshou:hover{
            color:silver;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            selectOrdersByUid();
        }
        function test(){
            alert("点击");
        }
        function llogin() {
            sessionStorage.removeItem("name");
            window.location.href =  "index.jsp";
        }
        function selectOrdersByUid(){
            $.ajax({
                url:"user/selectOrdersByUid.do",
                type:"post",
                dataType:"json",
                data:{
                    "name":sessionStorage.getItem("name")
                },
                success:function(data){
                    //清除旧的数据
                    $("#mytable").html("");
                    //增加新的数据
                    $("#mytable").append("<caption><h2>订单</h2></caption>" +
                        "<thead>" +
                        "<tr>" +
                        "<th>用户</th>" +
                        "<th>书号</th>" +
                        "<th>数量</th>" +
                        "<th style=\"width: 20px;\">操作</th>" +
                        "</tr>" +
                        "</thead>");
                    $.each(data,function(i,n){
                        $("#mytable").append('<tr><td>'+n.uid2+'</td><td>'+n.bid+'</td><td>'+n.bnum+'</td><td><button onclick="jieshou('+n.oid+')" class="jieshou">接受</button></td></tr>');
                    });
                }
            })
        }
        function selectFaOrdersByUid(){
            $.ajax({
                url:"user/selectFaOrdersByUid.do",
                type:"post",
                dataType:"json",
                data:{
                    "name":sessionStorage.getItem("name")
                },
                success:function(data){
                    //清除旧的数据
                    $("#mytable2").html("");
                    //增加新的数据
                    $("#mytable2").append("<caption><h2>订单</h2></caption>" +
                        "<thead>" +
                        "<tr>" +
                        "<th>用户</th>" +
                        "<th>书号</th>" +
                        "<th>数量</th>" +
                        "<th style=\"width: 20px;\">操作</th>" +
                        "</tr>" +
                        "</thead>");
                    $.each(data,function(i,n){
                        $("#mytable2").append('<tr><td>'+n.uid2+'</td><td>'+n.bid+'</td><td>'+n.bnum+'</td><td><button onclick="fasong('+n.oid+')" class="jieshou">发送</button></td></tr>');
                    });
                }
            })
        }
        function selectByOrdersByUid(){
            $.ajax({
                url:"user/selectByOrdersByUid.do",
                type:"post",
                dataType:"json",
                data:{
                    "name":sessionStorage.getItem("name")
                },
                success:function(data){
                    //清除旧的数据
                    $("#mytable3").html("");
                    //增加新的数据
                    $("#mytable3").append("<caption><h2>销售统计</h2></caption>" +
                        "<thead>" +
                        "<tr>" +
                        "<th>书号</th>" +
                        "<th>数量</th>" +
                        "</tr>" +
                        "</thead>");
                    $.each(data,function(i,n){
                        $("#mytable3").append('<tr><td>'+n.bid+'</td><td>'+n.bnum+'</td></tr>');
                    });
                }
            })
        }
        function jieshou(oid2) {
            console.log(oid2);
            $.ajax({
                url:"user/jieshou.do",
                type:"post",
                dataType:"json",
                data:{
                    "oid":oid2
                },
                success:function(data){
                    selectOrdersByUid();
                }
            })
        }
        function fasong(oid3) {
            console.log(oid3);
            $.ajax({
                url:"user/fasong.do",
                type:"post",
                dataType:"json",
                data:{
                    "oid":oid3
                },
                success:function(data){
                    selectFaOrdersByUid();
                }
            })
        }
    </script>
</head>
<body>
<div class="ding">
    <div style="float: top;margin-left:0px;margin-top:5px;margin-left:20px;">
        <button style="background:transparent;border-width:0px;color: black" onclick="test()"><img src="images/book.png" class="img2">图书</button>
    </div>
    <div style="font-style:italic;color:white;font-size:30px;text-align: center;position:fixed;left: 500px;width: 150px;height: 60px;top: 12px;">

    </div>
    <div style="text-align: center;position:fixed;right: 10px;width: 100px;height: 60px;top: 20px;">
        <button style="background:transparent;border-width:0px;color: black" onclick="llogin()">退出</button>
    </div>
</div>
<div class="cebian">
    <div class="cebianmsg2" style="margin-top:0px;">
        <button class="btn3">操作中心</button>
    </div>
    <div class="cebianmsg">
        <button class="btn2 active" id="shoppingcart">接收订单</button>
    </div>
    <div class="cebianmsg">
        <button class="btn2">发送订单</button>
    </div>
    <div class="cebianmsg">
        <button class="btn2">销售统计</button>
    </div>
</div>
<div class="zhuti">
    <div style="position: relative;top: 2px;left: 2px;width: 100%;height: 600px;background-color: #f5f5f5;overflow-y:auto;">
        <div class="content show" style="float: top;margin-left:5px;margin-top:10px;width: 100%;height: 70px;border-bottom:1px solid #CCC;">
            <div class="box">
                接收订单
            </div>
            <div style="position: relative;top: 100px;left: 0px;">
                <table id="mytable" width="80%" class="table">
                </table>
            </div>
        </div>
        <div class="content" style="float: top;margin-left:5px;margin-top:10px;width: 100%;height: 70px;border-bottom:1px solid #CCC;">
            <div class="box">
                发送订单
            </div>
            <div style="position: relative;top: 100px;left: 0px;">
                <table id="mytable2" width="80%" class="table">

                </table>
            </div>
        </div>
        <div class="content" style="float: top;margin-left:5px;margin-top:10px;width: 100%;height: 70px;border-bottom:1px solid #CCC;">
            <div class="box">
                销售
            </div>
            <div style="position: relative;top: 100px;left: 0px;">
                <table id="mytable3" width="80%" class="table">

                </table>
            </div>
        </div>
    </div>
</div>
<script>
    var btns = document.getElementsByClassName("btn2")//获取内容盒子
    var contents = document.getElementsByClassName("content")
    //遍历每个按钮为其添加点击事件
    for(var i=0;i<btns.length;i++){
        btns[i].index = i;
        btns[i].onclick = function(){//对当前点击的按钮赋予active类名及显示当前按钮对应的内容
            for(var j=0;j<btns.length;j++){
                btns[j].className = btns[j].className.replace(' active', '').trim();
                contents[j].className = contents[j].className.replace(' show', '').trim();
                if (j==0){
                    selectOrdersByUid();
                }
                if (j==1){
                    selectFaOrdersByUid();
                }
                if (j==2){
                    selectByOrdersByUid();
                }
            }
            this.className = this.className + ' active';
            contents[this.index].className = contents[this.index].className + ' show';
        };
    }
</script>
</div>
</body>
</html>